<template>
	<view>
		<view v-if="!mark" class="" style="margin: 0 auto;text-align: center;width: 100%;height: 100%;background: #FAFAFA;position: absolute;">
			<!-- <view v-if="!mark" class="text" :style="{ width: width + 'px' }">直播结束</view> -->
			<!-- <button v-if="!mark" @click="returns" class="but">返回</button> -->
			<image src="../../..//quedingture.png" mode="" style="width: 200rpx;height: 200rpx;margin-top: 250rpx;"></image>
			<view class="text" style="color: #666;margin: 60rpx 0 500rpx 0rpx;">本次直播已结束</view>
			<view @click="returns" style="width: 650rpx;background:rgb(78,161,53);color: #FFFFFF;border-radius: 10rpx;padding: 15rpx 0;margin: 0 auto;">返回</view>
			
		</view>
		<!-- <view :style="{ width: width + 'px', height: height + 'px' }" class="mark"></view> -->
		<view v-if="mark">
			<view class="arrow-boxs">
				<view class="arrow-img"><image class="user-img" src="../../..//live.png"></image></view>
				<view class="arrow-msg">
					<text class="id">{{title}}</text>
					<text class="text-box">直播中</text>
				</view>
			</view>
			<view class="arrow-guan">
				<view class="" :key="index" v-for="(item, index) in imageList"><image class="userx-img" :src="item" mode="aspectFill"></image></view>
				<view class=""><text class="usernub">{{imageList.length}}</text></view>
			</view>

			<!-- 直播拉流video -->
			<video @error="error" 	 :controls="isFullScreen==1"  :show-fullscreen-btn="isFullScreen==1" show-play-btn="false" enable-progress-gesture="false"  id="myVideo" :style="{ width: width + 'px', height: height + 'px' }" :src="url"  :autoplay="true" ></video>

			<!-- 这是聊天室 -->
			<view class="chat">
				<scroll-view :scroll-into-view="sorollView" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
						<view class="chat-list" v-for="(it, i) in chatList" :key="i" :id="it.id">
						<text v-if="it.type==1" class="chat-username">{{ it.name ? it.name : '未知' }}：</text>
						<text class="chat-usertext">{{ it.text }}</text>
					</view>
				</scroll-view>
			</view>

			<!-- 这是功能按钮 -->
			<view :style="{ width: width + 'px' }" class="but">
				<!-- 发送弹幕 -->
				<view class="bullet">
					<view class="nlv_reply" @click="openMark(0)">
						<!-- <text class="nlv_reply_text" @click="">说点什么...</text> -->
						<text style="color: white; margin:7px;" type="text" @click="openMark(0)">说点什么...</text>
					</view>
				</view>
			</view>

			<uni-popup ref="popup" type="bottom">
				<!-- 这是商品弹窗 -->
				<!-- v-if="type == 0" -->
				<view class="shop-list-box" :style="{ width: width + 'px' }">
					<view class="sendsome">
						<textarea
							auto-height
							focus="true"
							cursor-spacing="10"
							show-confirm-bar="false"
							class="saywhy"
							type="text"
							v-model="message"
							:value="message"
							placeholder="说点什么吧....."
						/>
						<image @tap="sendsome" class="tui-img" src="../../..//83.png" mode=""></image>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import TLS from '../../../tim_commen/tls/tls.js';
import cacheHelper from '../../../common/cacheHelper.js' // 缓存工具类
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	name: 'live',
	components: {
		uniPopup
	},
	data() {
		return {
			title:'',
			type: '',
			roomCode:'',
			mark:false,
			type: '',
			width: '',
			search: '',
			height: '',
			videoContext:'',
			message: '',
			url: '', //这是观看地址
			enableCamera: false,
			context: null,
			markact: true,
			arr: [],
			// shopArr: [],
			chatList: [],
			imageList: [],
			beauty: 0,
			tls: {},
			scrollTop: 0,
			sorollView: '',
			isFullScreen:'',
		};
	},
	onReady: function(res) {
		this.videoContext = uni.createVideoContext('myVideo');
		if(this.isFullScreen=="1"){}
	},
	onLoad(option) {
		this.title=option.title
		this.roomCode=option.roomCode
		this.url=cacheHelper.getPushLive()
		console.log(option)
		let res = uni.getSystemInfoSync();
		this.width = res.windowWidth;
		this.height = res.windowHeight;
        let user=cacheHelper.appUser()
		console.log(user)
		if(option.isFullScreen!=undefined&&option.isFullScreen!=null){
			this.isFullScreen="1"
		}
		this.tls = TLS.getTls(
			this.roomCode,
			user.userSig,
			user.id
		);
		
		this.tls.on(TLS.TLSData.EVENT.SDK_READY, async => {
			console.log(this.tls)
			const { userInfo, groupInfo } = this.tls.joinRoom({
				roomID:this.roomCode
			});
			console.log(userInfo, groupInfo);
		});
		//推送消息
		this.tls.on(TLS.TLSData.EVENT.MESSAGE, async data => {			
			const { nick, avatar, message, userID } = data;
			this.chatList.push({
				name: nick,
				text: message,
				type:1,
				id:`id${this.chatList.length}`
			});
			this.$nextTick(()=> {this.sorollView =this.chatList[this.chatList.length-1].id});
			
		});

		//加入获取观看人信息
		this.tls.on(TLS.TLSData.EVENT.JOIN_GROUP, async data => {
			const { nick, avatar, userID } = data;
			this.imageList.push(avatar)
			this.chatList.push({
				type:2,
				name: '',
				text: `${nick}加入了直播间`
			});
		});

		this.tls.on(TLS.TLSData.EVENT.EXIT_GROUP, async data => {
			const { nick, avatar, userID } = data;
			        this.imageList.splice(this.imageList.indexOf(avatar), 1);
			this.chatList.push({
				type:2,
				name: '',
				text: `${nick}退出了直播间`
			});
		});
	},
		// onReady: function (res) {
	// 	// 获取 video 上下文 videoContext 对象
	// 	this.videoContext = uni.createVideoContext('myVideo');
	// 	// 进入全屏状态
	// 	this.videoContext.requestFullScreen();
	// },
	onUnload() {
		this.tls.exitRoom();
		this.tls.destroy();
	},
	methods: {
		error(e) {
			console.log(e)
			if (e) {
				this.mark = true;
			}
		},
		sendsome() {
			console.log(this.tls);
			if (this.message) {
				this.tls
					.sendMessage(this.message)
					.then(res => {
						const { nick, avatar, message, userID } = res;
						this.chatList.push({
							name: nick,
							text: message,
							type: 1,
							id: `id${this.chatList.length}`
						});
						this.$nextTick(() => {
							this.sorollView = this.chatList[this.chatList.length - 1].id;
						});
						this.message = '';
						this.$refs.popup.close();
						this.tui.toast('发送成功');
						uni.showToast({
							title: '发送成功',
							icon: 'none',
							duration: 2000
						});
						console.log(res);
					})
					.catch(err => {});
			} else {
				uni.showToast({
					title: '消息不能为空',
					icon: 'none',
					duration: 2000
				});
			}
		},
		messagesearch: function(event) {
			console.log(event.target.value);
		},
		add() {
			console.log('s');
		},
		// 0是宝贝弹窗,1是订单弹窗,2是工具弹窗,3是设置弹窗
		openMark(type) {
			this.type == type;
			this.$refs.popup.open();
		},
		openmeiyan() {
			// this.$refs.popup.open()
			if (this.beauty == 0) {
				this.beauty = 9;
			} else {
				this.beauty = 0;
			}
		},
		returns() {
			// this.stopLive();
			uni.navigateBack({
				delta: 1
			});
		},
		EnableCamera() {
			this.enableCamera = true;
		},
		startLive() {
			let self = this;
			this.context.start({
				success: a => {
					self.markact = false;
					console.log('livePusher.start:' + JSON.stringify(a));
				}
			});
		},
		stopLive() {
			this.context.stop({
				success: a => {
					console.log(JSON.stringify(a));
				}
			});
		},
		switchCamera() {
			this.context.switchCamera({
				success: a => {
					console.log('livePusher.switchCamera:' + JSON.stringify(a));
				}
			});
		}
	}
};
</script>

<style>
.add-shop {
	font-size: 16px;
	color: #333333;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 10;
}
.shop-list-but-box {
	position: absolute;
	bottom: 10px;
	right: 20px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: row;
}
.shop-list-but {
	color: white;
	border-radius: 2px;
	font-size: 16px;
	background-color: #d4237a;
	padding: 10px 20px 10px 20px;
}
.mark-title {
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
	font-size: 20px;
}

   /deep/ video::-webkit-media-controls-timeline {
        display: none !important;
    }
.shop-list-img {
	margin-right: 10px;
	width: 100px;
	height: 100px;
}
.shop-list-title {
	font-size: 20px;
	color: #333333;
}
.shop-list-num {
	font-size: 16px;
	color: #c0c0c0;
	padding-top: 10px;
}
.shop-list-price {
	font-size: 16px;
	color: #d4237a;
	padding-top: 10px;
}
.scroll-Ys {
	background-color: white;
	height: 300px;
	width: 100%;
}
.shop-list-box {
	position: relative;
	background-color: white;
	width: 100%;
	height: 90px;
}
.shop-list-list {
	position: relative;
	padding-top: 5px;
	padding-bottom: 5px;
	display: flex;
	align-items: flex-start;
	flex-direction: row;
}
.chat-username {
	align-self: flex-start;
	font-size: 30rpx;
	color: #1ea5ff;
}
.chat-usertext {
	lines: 100;
	align-self: flex-start;
	font-size: 28rpx;
	color: white;
}
.chat-list {
	flex-direction: column;
	justify-content: center;
	margin-top: 5px;
	/* justify-content: flex-start;
	flex-direction: row; */
	background-color: rgba(0, 0, 0, 0.5);
	padding: 5px 10px 5px 10px;
	margin: 5px 5px;
	border-radius: 18px;
}
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
.scroll-Y {
	height: 450rpx;
	width: 250px;
}
.chat {
	position: fixed;
	z-index: 10;
	bottom: 80px;
	border-style: 1px solid rgba(0, 0, 0, 0.5);
}

.but-img {
	width: 20px;
	height: 20px;
}

.meiyanbut {
	padding: 10px 20px 10px 20px;
	margin-left: 10rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.but-text {
	padding-top: 3px;
	font-size: 13px;
	color: white;
}

.id {
	font-size: 14px;
	color: white;
}

.text-box {
	font-size: 12px;
	color: white;
}

.user-img {
	margin-right: 5px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.userx-img {
	margin-right: 5px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

.mark-text {
	color: white;
	font-size: 20px;
}

.mark {
	position: fixed;
	top: 0px;
	background-color: #000000;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.but {
	/* background-color: rgba(0, 0, 0, 0.4); */
	position: fixed;
	bottom: 0px;
	align-items: center;
	flex-direction: row;
	padding-bottom: 20px;
}

.tui {
	width: 200px;
	height: 200px;
}

.zhibotop {
	top: 60px;
	left: 10px;
	z-index: 10;
	position: fixed;
	display: flex;
	justify-content: space-between;
}

.arrow-box {
	position: fixed;
	top: 110px;
	left: 10px;
	z-index: 10;
	border-radius: 20px;
	background-color: #ff4545;
}

.jiesu {
	padding: 5px 10px 5px 10px;
	color: white;
	font-size: 12px;
}

.arrow-boxs {
	flex: 1;
	flex-direction: row;
	padding: 5px 25px 5px 10px;
	align-items: flex-start;
	justify-content: center;
	position: fixed;
	top: 50px;
	left: 10px;
	z-index: 10;
	border-radius: 30px;
	background-color: rgba(0, 0, 0, 0.4);
}

.arrow-guan {
	flex: 1;
	flex-direction: row;
	position: fixed;
	top: 65px;
	right: 10px;
	z-index: 10;
	border-radius: 30px;
}

.id {
	lines: 1;
	width: 100px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: white;
	font-size: 14px;
}
.usernub {
	color: white;
	border-radius: 30px;
	padding: 6px 10px 6px 10px;
	align-items: center;
	font-size: 12px;
	background-color: rgba(0, 0, 0, 0.4);
}
.bullet {
	left: 10px;
	width: 180px;
	height: 35px;
	background: red;
	z-index: 10;
	border-radius: 30px;
	background-color: rgba(0, 0, 0, 0.4);
}

.nlv_reply_text {
	color: #ffffff;
	font-size: 36rpx;
	padding: 7px 5px 6px 7px;
	margin-left: 15px;
}

.camera {
	position: fixed;
	top: 90px;
	right: 5px;
	z-index: 10;
}
.sendsome {
	position: relative;
	margin-left: 10px;
	margin-top: 10px;
	padding-bottom: 20px;
	align-items: flex-start;
	flex-direction: row;
}
.tui-img {
	position: absolute;
	right: 30rpx;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}
.saywhy {
	width: 300px;
}
</style>
